import React from 'react'
import Layout from './Layout'
import Search from '../core/Search'
import ProductItem from './ProductItem'
import { useDispatch,  useSelector } from 'react-redux'
import { useEffect } from 'react'
import { Col, Row, Typography  } from 'antd'
import { get_products } from '../../store/actions/products'

const { Title } = Typography

function Home() {
	const dispatch = useDispatch()
	
	useEffect(() => {
		dispatch(get_products({sortBy:'sold',limit:4, order: "desc"}))
		dispatch(get_products({sortBy:'createdAt',limit:4, order: "desc"}))
	},[]) // eslint-disable-line react-hooks/exhaustive-deps

	const { sold, createdAt } = useSelector(state => state.products)
	// console.log(sold,createdAt);
	return (
		<>
			<Layout title="拉勾严选首页" subTitle="尽情享受吧">
				<Search/>
				<Title level={5} style={{marginTop: '20px'}}>最新上架</Title>
				<Row gutter={[16,16]}>
					{
						createdAt.map(item =>
							(
								<Col key={item._id} span={6} >
							 		<ProductItem product={ item }/>
						  	</Col>
							)						
						)
					}
				</Row>
				<Title level={5} style={{marginTop: '20px'}}>最受欢迎</Title>
				<Row gutter={[16,16]}>
					{
						sold.map(item =>
							(
								<Col key={item._id} span={6}>
									<ProductItem product={ item }/>
								</Col>
							)
						)
					}
				</Row>
			</Layout>
		</>
	)
}

export default Home
